<template>
	<view class="goods-list" v-if="productList">
		<view class="product-list" v-if="productList">
			<view
				class="product"
				v-for="(product,index) in productList"
				:key="product.goods_id"
				@tap="goodsDetail(product)"
			>
				<image style="height:300rpx;" :src="product.big"></image>
				<view class="name">{{ product.goods_name }}</view>
				<view class="info">
					<view class="price">￥{{ formatPrice(product.cost) }}</view>
					<view class="slogan">{{ checkBuyCount(product.buy_count) }}人已购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['productList','title','goodsCategory'],
		data() {
			return {
				loadingText: '加载完毕',
				minHeight:100
			};
		},
		// onReachBottom() {
		// 	uni.showToast({ title: '触发上拉加载' });
		// 	let len = this.productList.length;
			
		// 	this.loadingText = '到底了';
		// 	return false;
			
		// },
		methods:{
			goodsDetail(good){
				uni.navigateTo({
					url:"/pages/goods/goods?goods_id="+good.goods_id
				})
			},
			checkBuyCount(buyCount){
				let str
				let count = buyCount
				if(count>=0 && count<10000){
					return count
				}else if(count>=10000){
					let extendStr = count/10000
					let reslut = extendStr.toFixed(1)
					str = reslut+"万"
					return str
				}else{
					return 0
				}
			},
			formatPrice(price) {
			  if (typeof price !== 'number') return price
			  return String(Number(price).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
			}
		}
	}
</script>

<style lang="scss">
.goods-list {
	background-color: transparent;
	
	.product-list {
		flex:1;
		width: 100%;
		padding: 0 4% 3vw 4%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.product {
			width: 48%;
			border-radius: 20upx;
			background-color: #fff;
			margin: 0 0 30upx 0;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
			image {
				border-radius: 20upx 20upx 0 0;
			}
			.name {
				width: 92%;
				padding: 5upx 4% 10upx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 28upx;
			}
			.info {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				width: 92%;
				padding: 10upx 0 10upx 3%;

				.price {
					color: #e65339;
					font-size: 28upx;
					font-weight: 600;
				}
				.slogan {
					color: #807c87;
					font-size: 20upx;
				}
			}
		}
	}
}
.card-category{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #FFF;
	height: 80upx;
	padding: 0 30upx;
	margin-bottom: 30upx;
	span{
		color: #333;
		font-size: 32upx;
		font-weight: 600;
	}
	p{
		color: #666;
		font-size:26upx;
	}
}
</style>
